<template>
  <div>
    <h2>Bar 组件</h2>
    <p>{{ count }}</p>
    <p>{{ message }}</p>
    <p>{{ remaning }}</p>
    <p>{{ getTodoById(2).text}}</p>
    <button @click="increment">增加</button>
    <button @click="decreaseAsyncB">减少</button>
    <button @click="SOME_MUTATION">改变message</button>
    <button @click="asyncIncrement({ amount : 10 })">异步自增使用actions</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

  export default {
    created(){
      console.log(this.$store)
    },
    methods: {
      // 把 SOME_MUTATION 映射为组件的一个 method
      // 类似 this.SOME_MUTATION()
      ...mapMutations(['SOME_MUTATION']),
      increment () {
        // 调用 storeMessage 的increment事件
        this.$store.commit({
          type: 'increment'
        })
      },
      /**
       * Action 类似 mutation
       * Action提交的就是 Mutation，而不是直接更改状态
       * Action本身是可以包含异步操作
       */
      // 将 `this.decreaseAsync()` 映射为 `this.$store.dispatch('decreaseAsync')
      ...mapActions(['decreaseAsync', 'decrease', 'decreaseAsyncB']),
      ...mapActions({
        asyncIncrement: 'addIncrement'
      })
      // decrease() {
        // 提交到mutations
        // this.$store.commit
        // 提交到 action
        // this.$store.dispatch('decrease')
        // 异步操作
        // this.$store.dispatch('decreaseAsync')
        // this.$store.dispatch({
        //   type: 'decreaseAsync',
        //   amout: 10
        // })
      // }
    },
    computed: {
      // 拿到两个get方法
      ...mapGetters(['remaning', 'getTodoById']),
      // 拿取store中的值
      // 默认访问全局
      ...mapState({
        count: 'count',
        // 等价于 state => staet.message
        message: 'message'
      }),
      // count () {
      //   return this.$store.state.count
      // },
      // message () {
      //   return this.$store.state.message
      // }
    }
  }
</script>

<style>

</style>